<template>
    <div class="detilBox">
        <div class="head">
            <div class="imgBox">
                <img src="" alt="">
            </div>
            <p>
               微志益
            </p>
        </div>
        <div class="content">
            <div class="center" v-if="this.IndexData">
                <h3>{{this.IndexData.txt}}</h3>
                 <p class="nr" v-if="this.IndexData.nr1">
                    {{this.IndexData.nr1}}
                </p>
                <div class="imgBox" v-if="this.IndexData.detailImg1">
                    <img :src="this.IndexData.detailImg1" alt="">
                </div>
                 <p class="nr" v-if="this.IndexData.nr2">
                    {{this.IndexData.nr2}}
                </p>
                <div class="imgBox" v-if="this.IndexData.detailImg2">
                    <img :src="this.IndexData.detailImg2" alt="">
                </div>
                <p class="nr" v-if="this.IndexData.nr3">
                    {{this.IndexData.nr3}}
                </p>
                <div class="btn">
                    参与捐物
                </div>
                <div class="talk">
                    <p class="tit">网友评论 
                        <span>请文明理性发言</span>
                    </p>
                    <div class="input">
                        <textarea value="我可以自动换行" placeholder="说两句吧~"></textarea>
                        <div class="fb">发布</div>
                    </div>
                    
                    <div class="nulltalk">
                        暂无评论，快来评论一下吧~
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="tj">
                    <p class="title">公益项目推荐</p>
                    <ul v-if="detailData">
                        <li v-for="item in detailData.slice(0,5)" :key="item.id">
                            <div class="imgBox">
                                <img :src="item.image" alt="">
                            </div>
                            <div class="txtBox">
                                <p class="name">{{item.name}}</p>
                                <p class="time">{{item.time}}</p>
                                <p class="tell">{{item.tell}}</p>    
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <end></end>
    </div>
</template>

<script>
import {getGoods} from '@/api/Goods'
import {getActivity} from '@/api/Money'
export default {
    data(){
        return{
            detailData:"",
            IndexData:""
        }
    },
    mounted(){
        getActivity().then(res=>{
            this.detailData = res.data
            // console.log(res.data);
        })
        getGoods().then(res=>{
             //截取出id
             let id=this.$route.params.id.slice(3)
              this.IndexData=res.data.list[0].li.filter((item=>{
                 return item.sid==id
             }))
             this.IndexData=this.IndexData[0]
            //  console.log(this.IndexData);
             
        })      
    }
}
</script>
<style lang="scss" scoped>
    .head{
        width: 100%;
        height: 60px;
        border: 1px solid;
        display: flex;
        padding: 0 200px;
        box-sizing: border-box;
        background: #333;
        min-width: 1000px;
        position: fixed;
        top: 0;
        .imgBox{
            width: 45px;
            height: 45px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background: url('/images/image3.jpg');
            background-size: cover;
            background-position: -7px 2px;
            margin-top: 6px;
        }
        p{
            line-height: 60px;
            padding-left: 20px;
            color: green;
            font-size: 18px;
        }
    }

    .content{
        width: 1200px;
        border-top: 1px solid #c0c0c0;
        margin:100px auto;
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        .center{
            width: 680px;
            margin-left: 100px;
            h3{
                font-size: 25px;
                text-align: center;
            }
            .nr{
                width: 600px;
                text-indent: 30px;
                margin: auto;
                margin-top: 30px;
                text-align: left;
                font-size: 15px;
                color: #333;
            }
            .imgBox{
                width: 600px;
                height: 400px;
                border: 1px solid #eee;
                margin: auto;
                margin-top: 40px;
                margin-bottom: 40px;
                overflow: hidden;
                img{
                    width: 100%;
                    // height: 100%;
                }
            }
            .btn{
                width: 200px;
                height: 50px;
                background: green;
                color: #fff;
                text-align: center;
                line-height: 50px;
                margin: 30px auto;
                border-radius: 10px;
                cursor: pointer;
                transition: all .2s;
            }
            .btn:hover{
                transform: scale(1.02)
            }
            .talk{
                width: 600px;
                margin: 50px auto;
                border-bottom: 1px solid #c0c0c0;
                padding-bottom: 20px;
                .tit{
                    font-size: 24px;
                    span{
                        color: #777;
                        font-size: 14px;
                        padding-left: 10px;
                    }
                }
                .input{
                    width: 400px;
                    margin: auto;
                    textarea{
                        width: 400px;
                        height: 80px;
                        display: block;
                        margin: auto;
                        resize: none;
                        padding: 10px 20px;
                        color: #777;
                        margin-top: 10px;
                        box-sizing: border-box;
                    }
                    .fb{
                        float: right;
                        font-size: 14px;
                        cursor: pointer;
                        background: green;
                        padding: 2px 5px;
                        border-radius: 5px;
                        color: aliceblue;
                        margin-top: 10px;
                    }
                }
                .nulltalk{
                    margin-top: 80px;
                    // border: 1px solid;
                    text-align: center;
                    font-size: 14px;
                    color: #777;
                }
            }

        }
        .right{
            width: 360px;
            .tj{
                box-sizing: border-box;
                padding: 15px 20px;
                position: -webkit-sticky;
                position: sticky;
                top: 80px;
                z-index: -1;
                .title{
                    font-size: 18px;
                    font-weight: bold;
                }
                ul{
                    margin-top: 20px;
                    li{
                        border: 1px solid #c0c0c0;
                        border-left: none;
                        border-right: none;
                        display: flex;
                        cursor: pointer;
                        margin-bottom: 20px;
                        padding: 10px;
                        .imgBox{
                            width: 140px;
                            height: 75px;
                            background: #000;
                            overflow: hidden;
                            img{
                                width: 100%;
                            }
                        }
                        .txtBox{
                            font-size: 14px;
                            padding-left: 10px;
                            p{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            .name{
                                font-size: 16px;
                            }
                            .time{
                                color: #777;
                                margin-top: 8px;
                            }
                            .tell{
                                width: 140px;
                                color: #777;
                            }
                        }
                    }
                }
            }
        }
    }
</style>